<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>定位属性</title>
		<style type="text/css">
			body{
				margin: 0px;
			}
			#main{
				width: 90%;
				height: 600px;
				background-color: #D3E0D6;
				margin: 0px auto;
			}
			#div1 {
				height: 300px;
				width: 600px;
				background-color: red;
				border: solid 1px black;
			}
			
			#div2{
				height: 300px;
				width: 300px;
				border: solid 1px black;
				background-color: aqua;
			}
			/*绝对定位：相对于body中的父级元素的位置进行的定位，起始位置是其父级元素的左上角的位置*/
			/*#div1{
				position:absolute;
				top: 100px;
				left: 200px;
				
			}*/
			/**相对定位：相对于当前标签的位置进行的偏移处理，起始位置是该元素的当前位置
			 * 使用相对定位的方式完成元素的居中定位***/
			#div1{
				position:relative;
				top: 0px;
				left: 50%; /*div1在父元素中向右移动一半，则div1元素左侧在父元素的中间位置***/
				/*使用transform将div1向左移动自生的50%，这样div1的中间位置就在父元素的中间，达到一个居中效果**/
				transform: translateX(-50%);
			}
			/*fixed定位：是相对于浏览器的定位，起始位置是浏览器的左上角的位置**/
			
		</style>
	</head>

	<body>
		<div id="main">
			<div id="div1"></div>			
		</div>
	</body>

</html>